<template>
  <div class="editData">
    <van-nav-bar title="编辑资料" left-arrow @click-left="onClickLeft">
    </van-nav-bar>
    <div class="user-img">
      <van-uploader :after-read="afterRead" multiple :max-count="1">
        <img :src="userInfo.photo" alt="" />
      </van-uploader>
    </div>
    <div class="list">
      <ul>
        <li @click="nike">
          昵称<van-icon name="arrow" /><span>{{ userInfo.name }}</span>
        </li>
        <li>
          性别
          <button
            :class="{ active: !isShow }"
            style=" border-radius: 0 20px 20px 0px;"
            @click="show"
          >
            <span>女</span>
          </button>
          <button
            :class="{ active: isShow }"
            style=" border-radius: 20px 0 0 20px;"
            @click="show"
          >
            <span>男</span>
          </button>
        </li>
        <li @click="birthdayShow">
          生日<van-icon name="arrow" /><span>{{ userInfo.birthday }}</span>
        </li>
      </ul>
    </div>
    <!-- <van-button type="info" @click="save">保存</van-button> -->
    <van-dialog
      v-model="dialogShow"
      @confirm="saveName(userInfo.name)"
      title="修改昵称"
      show-cancel-button
    >
      <van-field ref="nameField" v-model="userInfo.name" />
    </van-dialog>
    <van-popup v-model="feteShow" position="bottom" :style="{ height: '30%' }">
      <van-datetime-picker
        v-model="currentDate"
        type="date"
        title="选择年月日"
        :min-date="minDate"
        :max-date="maxDate"
        @confirm="confirm"
        @cancel="cancel"
      />
    </van-popup>
    <!-- // 头像裁切 -->
    <div class="cropper-box" v-show="isCropper">
      <vueCropper
        ref="cropper"
        fiexd
        autoCrop
        :img="img"
        :autoCropWidth="120"
        :autoCropHeight="120"
      ></vueCropper>
      <van-button type="default" @click="isCropper = false" class="pri"
        >取消</van-button
      >
      <van-button type="default" @click="submitFile" class="in"
        >确认</van-button
      >
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex'
import { saveUserInfo, updatePhoto } from '../../api/my'
import { VueCropper } from 'vue-cropper'
export default {
  components: {
    VueCropper // 注册组件
  },
  name: 'editData',
  data () {
    return {
      isShow: '',
      dialogShow: false,
      feteShow: false,
      minDate: new Date(1880, 0, 1),
      maxDate: new Date(2021, 10, 1),
      currentDate: new Date(2021, 0, 17),
      img: '',
      isCropper: false
      // userInfo: {}
    }
  },
  methods: {
    // 图片裁切
    submitFile () {
      // 获取截图的blob数据
      this.$refs.cropper.getCropBlob(blob => {
        const data = new FormData()
        data.append('photo', blob)
        updatePhoto(data).then(res => {
          this.$toast.success('更新成功!')
          // 更新本地vuex数据
          this.$store.commit('setUserInfo', {
            ...this.userInfo,
            // 使用最新的那么覆盖原来的
            photo: res.data.data.photo
          })
        })
        this.isCropper = false
      })
    },
    // 返回按钮
    onClickLeft () {
      // 跳转我的页面
      this.$router.push({ path: '/my' })
    },
    show () {
      this.isShow = !this.isShow
      let genders = 0
      if (this.isShow) {
        genders = 1
      }
      saveUserInfo({ gender: genders }).then(res => {
        this.$toast.success('更新成功!')
        // 更新本地vuex数据
        this.$store.commit('setUserInfo', {
          ...this.userInfo,
          // 使用最新的那么覆盖原来的
          gender: genders
        })
      })
    },
    // 编辑昵称
    nike () {
      this.dialogShow = true
      this.$nextTick(() => {
        this.$refs.nameField.focus()
      })
    },
    // 编辑生日
    birthdayShow () {
      this.feteShow = true
      // 使生日控件默认选择数据时间
      this.currentDate = new Date(this.userInfo.birthday)
    },
    // 时间确认
    confirm (value) {
      const date = new Date(value)
      const y = date.getFullYear()
      let m = date.getMonth() + 1
      m = m < 10 ? '0' + m : m
      let d = date.getDate()
      d = d < 10 ? '0' + d : d
      this.userInfo.birthday = y + '-' + m + '-' + d
      this.feteShow = false
      saveUserInfo({ birthday: this.userInfo.birthday }).then(res => {
        this.$toast.success('更新成功!')
        // 更新本地vuex数据
        this.$store.commit('setUserInfo', {
          ...this.userInfo,
          // 使用最新的那么覆盖原来的
          birthday: res.data.data.birthday
        })
      })
    },
    // 取消选择时间
    cancel () {
      this.feteShow = false
    },
    // 返回布尔值
    afterRead (file) {
      this.isCropper = true
      this.img = file.content
      // const data = new FormData()
      // data.append('photo', file.file)
      // updatePhoto(data).then(res => {
      //   this.$toast.success('更新成功!')
      //   // 更新本地vuex数据
      //   this.$store.commit('setUserInfo', {
      //     ...this.userInfo,
      //     // 使用最新的那么覆盖原来的
      //     photo: res.data.data.photo
      //   })
      // })
      // return true
    },
    // 保存名称
    saveName (names) {
      saveUserInfo({ name: names }).then(res => {
        this.$toast.success('更新成功!')
        // 更新本地vuex数据
        this.$store.commit('setUserInfo', {
          ...this.userInfo,
          // 使用最新的那么覆盖原来的
          name: res.data.data.name
        })
      })
    }
  },
  created () {
    console.log(this.$store.state.userInfo.gender)
    if (this.$store.state.userInfo.gender === 0) {
      this.isShow = false
    } else {
      this.isShow = true
    }
  },
  computed: mapState(['userInfo'])
}
</script>

<style lang="less" scope>
.editData {
  height: 100vh;
  background-color: #edf3f9;
  .cropper-box {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    .pri {
      position: absolute;
      left: 0;
      bottom: 0;
      background-color: #07c160 !important;
      color: #fff !important;
    }
    .van-button--default {
      position: absolute;
      right: 0;
      bottom: 0;
      background-color: #1989fa;
      color: #fff !important;
    }
  }
  .van-nav-bar__content {
    background-color: #5876b1 !important;
    z-index: 9999;
  }
  .van-nav-bar {
    height: 0 !important;
  }
  .van-nav-bar__title {
    font-size: 18px !important;
    color: #fff !important;
  }
  .van-nav-bar__placeholder {
    height: 48px !important;
  }
  .user-img {
    margin-top: 70px;
    text-align: center;
    img {
      width: 120px;
      height: 120px;
      border-radius: 50%;
    }
  }
  .list {
    margin-top: 40px;
    ul {
      li {
        padding: 0 20px;
        line-height: 60px;
        font-size: 17px;
        span {
          float: right;
          color: #969799 !important;
          font-size: 16px;
        }
        .van-icon-arrow {
          float: right;
          padding-top: 20px;
          padding-left: 10px;
          color: #969799 !important;
        }

        .van-icon {
          top: 2px;
          margin-right: 4px;
          color: #4b6cae;
        }
      }
      li:first-child:active,
      li:last-child:active {
        background-color: #edf3f9;
      }
      button {
        width: 90px;
        line-height: 34px;
        border: none;
        float: right;
        span {
          float: none;
          color: #969799 !important;
          font-size: 16px;
        }
      }
      .active {
        background-color: #5876b1;
        span {
          color: #fff !important;
        }
      }
    }
  }
  .van-button--info {
    top: 40px;
    right: -15px;
    border-radius: 25px;
  }
  .van-field__control {
    border: 1px solid #dfdfdf;
    height: 40px;
    padding-left: 20px;
  }
}
</style>
